<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个人资料--layui后台管理模板</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui-admin/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/layui-admin/css/user.css" media="all" />
	<link rel="stylesheet" href="/layui-admin/css/simpleAlert.css">
	<script src="/layui-admin/js/simpleAlert.js"></script>
	<script src="/js/jquery-1.9.0.min.js"></script>
	<style type="text/css">
		.file {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			overflow: hidden;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
		}

		.file input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
		}

		.file:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}
		img {
			margin-left: 330px;
			border: 3px solid #cccccc;
			border-radius: 50%;
			height: 80px;
			width: 80px;
		}
	</style>
	<script type="text/javascript">
        function imgChange(){
            var filePath=$("#user_img").val();
            if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
                var arr=filePath.split('\\');
                var fileName=arr[arr.length-1];
                $("#showFileName1").html(fileName);
                var img_url = getObjectURL($("#user_img").get(0).files[0]);
                $("#img_src").attr("src",img_url);
            }else{
                $("#showFileName1").html("");
                $("#showFileName1").html("您未上传文件，或者您上传文件类型有误！").show();
            }
        };
        //建立一個可存取到該file的url
        function getObjectURL(file)
        {
            var url = null ;
            if (window.createObjectURL!=undefined)
            { // basic
                url = window.createObjectURL(file) ;
            }
            else if (window.URL!=undefined)
            {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            }
            else if (window.webkitURL!=undefined) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
        $(document).ready(function(){
            $.get("/get_user", function(data){
                    var obj = JSON.parse(data);
                     var imgsrc = 'http://localhost:8080/images/headimg/'+obj.photo;
                    $("#email").val(obj.email);
                    $("#nickName").val(obj.nickname);
                    $("#img_src").attr('src',imgsrc)
            });
        });
	</script>
</head>
<body class="childrenBody">
	<img src="" id="img_src">
	<form class="layui-form">
		<div class="user_left">
			<div class="layui-form-item">
			    <label class="layui-form-label">昵称</label>
			    <div class="layui-input-block">
			    	<input type="text" id="nickName" value="" placeholder="请输入用户昵称" lay-verify="required" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">邮箱</label>
			    <div class="layui-input-block">
			    	<input type="text" id="email" value="" placeholder="请输入邮箱" lay-verify="required|email" class="layui-input">
			    </div>
			</div>
		    <div class="layui-form-item">
			<label class="layui-form-label">头像上传</label>
			<a class="file">选择文件
				<input type="file" name="user_img" id="user_img" onchange="imgChange()" ></a>
			<div id="showFileName1" style="width: 50%">
			</div>
		</div>
		<div class="layui-form-item" style="margin-left: 10%;">
		  	    <div class="layui-input-block">
		    	<button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
		</div>
	</form>
	<script type="text/javascript" src="/layui-admin/layui/layui.js"></script>
	<script type="text/javascript">
        var $form;
        var form;
        var $;
        layui.config({
            base : "js/"
        }).use(['form','layer','upload','laydate'],function() {
            form = layui.form();
            var layer = parent.layer === undefined ? layui.layer : parent.layer;
            $ = layui.jquery;
            $form = $('form');
            laydate = layui.laydate;
            layui.upload({
                url: "../../json/userface.json",
                success: function (res) {
                    var num = parseInt(4 * Math.random());  //生成0-4的随机数
                    //随机显示一个头像信息
                    userFace.src = res.data[num].src;
                    window.sessionStorage.setItem('userFace', res.data[num].src);
                }
            });
            //判断是否修改过头像，如果修改过则显示修改后的头像，否则显示默认头像
            if (window.sessionStorage.getItem('userFace')) {
                $("#userFace").attr("src", window.sessionStorage.getItem('userFace'));
            } else {
                $("#userFace").attr("src", "../../images/face.jpg");
            }

            form.on('submit(changeUser)', function (data) {
                var user_img = new FormData();
                user_img.append("file", $('#user_img')[0].files[0]);
                $.ajax({
                    url: "http://localhost:8080/user/change_headimg",
                    data: user_img,
                    type: "post",
                    dataType: "json",
                    cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                    success: function (res) {
                        var data = eval(res);
                        if (data.success==true){
							var user = new FormData();
							user.append("nickname",$("#nickName").val());
							user.append("email",$("#email").val());
                            $.ajax({
                                url: "http://localhost:8080/user/change_info",
                                data: user,
                                type: "post",
                                dataType: "json",
                                cache: false,//上传文件无需缓存
                                processData: false,//用于对data参数进行序列化处理 这里必须false
                                contentType: false, //必须
                                success: function (res) {
                                    var result = eval(res);
                                    if (result.msg=="修改成功！"){
                                        layer.msg("数据修改成功了")
									}else{
                                        layer.msg(result.msg);
									}
                                }, error: function () {
                                    layer.msg("网络发生错误了")
                                }
                            });
						}else{
                            layer.msg("数据修改失败");
						}

                    },
                    error: function () {
                        layer.msg("网络发生错误了")
                    },
                    beforeSend:function(){
                        //弹出loading
                        var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
                        setTimeout(function(){
                            top.layer.close(index);
                            top.layer.msg("数据修改成功！");
                            layer.closeAll("iframe");
                            //刷新父页面
                            parent.location.reload();
                        },2000);
                    }
                });
                return false;//只此一句
            });
        });
	</script>
</body>
</html>